@import "base";
@import "normalize";
@import "variable";
.m_nav{
  width: 100%;
  background-color: #fff;
  padding-top: 50rem/@base;
  margin-bottom: 10rem/@base;
  li{
    float: left;
    width: 25%;
    padding-left: 45rem/@base;
    padding-right: 45rem/@base;
    a{
      display: block;
      width: 100%;
      height: 100%;
      img{
        width: 100%;
        margin: 0 auto;
      }
      
    }
    p{
      height: 24rem/@base;
      line-height: 24rem/@base;
      font-size: 12rem/@base;
      text-align: center;
      margin-bottom: 10rem/@base;
      }
     &:nth-child(9),
     &:nth-child(10),
     &:nth-child(11),
     &:nth-child(12) {
      display: none;
      &.active{
        display: block;
      }
     }
  }
}
.m_product{
  width: 100%;
  background-color: #fff;
  .pro_tit{
    width: 100%;
    color: #fff;
    height: 70rem/@base;
    line-height: 70rem/@base;
    background-color: #ffa42c;
    font-size: 24rem/@base;
    padding-left: 10rem/@base;
    padding-right: 10rem/@base;
    span.more{
      display: block;
      width: 40rem/@base;
      height: 40rem/@base;
      margin-top: 15rem/@base;
      img{
        width: 100%;
      }
    }
  }
  .pro_content{
    width: 100%;
    .pro_item{
      width: 100%;
      height: 255rem/@base;
      border-bottom: 1px solid #ccc;
      a{
        display: block;
        width: 100%;
        height: 100%;
        .pro_img{
          padding: 10rem/@base;
          width: 230rem/@base;
          height: 100%;
        }
        .pro_message{
          overflow: hidden;
          height: 100%;
          padding:  10rem/@base;
          position: relative;
          .pro_name{
            font-size: 18rem/@base;
          }
          .pro_price{
            font-size: 20rem/@base;
            color: #ffa42c;
          }
          span{
            color: #666;
            font-size: 14rem/@base;
            height: 30rem/@base;
          }
          p.time{
            span{
              display: block;
            }
            width: 100%;
            height: 30rem/@base;
            line-height: 30rem/@base;
            position: absolute;
            left: 0;
            bottom: 40rem/@base;
            padding: 0 10rem/@base;
          }
        }
      }
    }
  }
}
button.more{
  width: 90%;
  height: 60rem/@base;
  line-height: 60rem/@base;
  text-align: center;
  margin: 10rem/@base 5%;
  background-color: #fff;  
  border: 1rem/@base solid #ccc;
  border-radius: 5rem/@base;
  font-size: 24rem/@base;
}

.brank_rank{
  width: 100%;
  color: #fff;
  height: 70rem/@base;
  line-height: 70rem/@base;
  background-color: #ffa42c;
  font-size: 24rem/@base;
  padding-left: 10rem/@base;
  padding-right: 10rem/@base;
  margin-top: 10rem/@base;
  span.more{
    display: block;
    width: 40rem/@base;
    height: 40rem/@base;
    margin-top: 15rem/@base;
    img{
      width: 100%;
    }
  }
}

